<!-- 投票主页面 -->
<template>
  <div>
    <myheader title="社区投票" rightBtn="发起投票" @updataInfo="govoteAdd"></myheader>
    <div class="serarch">
      <van-search v-model="searchValue" show-action placeholder="请输入搜索关键词" @search="onSearch" />
    </div>

    <div v-if="!empty">
      <vote-single
        @getVotes="handelChange"
        :pageSize="pageSize"
        :total="total"
        :vote="vote"
        :currentPage="currentPages"
        :pageCount="pageCount"
      ></vote-single>
    </div>
    <van-empty v-else image="error" description="暂无此内容！" />
  </div>
</template>

<script>
import myheader from '../../../comon/myheader.vue'
import voteSingle from '../../../comon/voteSingle.vue'
export default {
  components: {
    myheader,
    voteSingle,
  },
  data() {
    return {
      vote: [],
      voteIndex: [], // 当前登录用户已经投票的数组下标
      currentPages: 1, // 当前现实页码数
      total: 8, // 总数
      pageSize: 4, // 每页显示数据
      pageCount: 2, // 共有几页
      searchValue: '',
      empty: false,
    }
  },

  created() {
    this.getvote()
  },
  methods: {
    //获取投票内容
    async getvote() {
      let res
      if (this.$store.getters.getUserInfo) {
        res = await this.$axios.get('/vote/list', {
          params: {
            current: this.currentPages,
            size: this.pageSize,
            userId: this.$store.getters.getUserInfo.id,
          },
        })
      } else {
        res = await this.$axios.get('/vote/list', {
          params: {
            current: this.currentPages,
            size: this.pageSize,
          },
        })
      }

      if (res.data.code == 200) {
        this.vote = res.data.data.records
        this.total = res.data.data.total
        this.pageCount = res.data.data.pages
      }
    },

    //判断投票结束时间是否超过本地时间
    isEndDate(end) {
      if (Date.parse(new Date()) >= Number(end)) {
        return '投票时间结束，查看详情'
      } else {
        return '正在投票，查看详情'
      }
    },

    // 跳转到添加投票页面
    govoteAdd() {
      this.$router.push('/voteAdd')
    },
    // 	// 跳转到详情页面
    showVote(item) {
      this.$router.push({
        name: 'voteShow',
        query: {
          item: JSON.stringify(item),
        },
      })
    },
    //    // 分页处理
    handelChange(currentPage) {
      this.currentPages = currentPage
      this.getvote()
    },
    // 搜索
    async onSearch() {
      const res = await this.$axios.get('/vote/list?title=' + this.searchValue)
      if (res.data.code == 200) {
        this.vote = res.data.data.records
        this.total = res.data.data.total
        this.pageCount = res.data.data.pages
        this.searchValue = ''
        if (res.data.data.total == 0) {
          this.empty = true
        } else {
          this.empty = false
        }
      }
    },
  },
}
</script>

<style scoped>
.serarch {
  margin-top: 46px !important;
}
.vote {
  background: rgba(247, 248, 250);
}
.li_content {
  background: #fff;
  margin-bottom: 10px;
}
.li_content_li1_headimg {
  height: 50px;
  width: 50px;
  overflow: hidden;
}
.li_content_li1_headimg > img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
.li_content_li1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 10px 0 10px;
  margin: 10px;
}
.li_content_li1_div2 {
  margin-left: 10px;
}
.vote_name {
  font-size: 0.45rem;
  color: #304d80;
}
.vote_date {
  font-size: 0.4rem;
  color: #445588;
}

/* 存投票标题 */
.li_content_li2 {
  margin-left: 20px;
  padding-right: 20px;
  width: 100%;
  font-size: 0.5rem;
  font-weight: 500;
}
.li_content_li3 {
  margin-top: 10px;
  width: 100%;
  text-align: center;
  font-size: 0.4rem;

  color: #09a3d6;
  padding-bottom: 10px;
}
.vote_tag {
  display: inline-block;
  position: absolute;
  right: 0.3rem;
  font-size: 0.3rem !important;
  line-height: 31px;
}
</style>
